<div class="row-fluid sortable ui-sortable">
	<div id="chart-distribusi" class="box span12">
		<div class="box-header well" data-original-title>
			<h2 id="action-title">Grafik Distribusi Sapi</h2>
			<div class="box-icon">
				<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
			</div>
		</div>
		<div class="box-content">
			<table class="table span5">
				<tr>
					<td>
						<label>Pilih Kota</label>
					</td>
					<td>
						<div class="controls">
							<select id="id-kota" data-rel="chosen" name='kota' onchange="drawChartDist(document.getElementById('id-kota').value);">
							<?php foreach($kota->result_array() as $row): ?>
									<option value='<?php echo $row["ID_KOTA"];?>'>
										<?php echo $row["NAMA_KOTA"]; ?>
									</option>
							<?php endforeach;?>
							</select>
						</div>
					</td>
				</tr>
			</table>
			<div id="chart-dist" style="height:300px" class="span11">
			</div>
		</div>
	</div>
</div>

<script>
/* Chart Distribusi */
function drawChartDist(idKota){
	$(("#chart-dist").html).hide();
	{
		var masuk = [], keluar = [], jumlah = [];
		<?php
			if($dist_masuk){
				foreach($dist_masuk->result_array() as $data){
					echo "
						var myDate = '".$data['TANGGAL_KEJADIAN']."';
						myDate = myDate.split('-');
						var newDate = myDate[1]+'/'+1+'/'+myDate[0];
						nd = new Date(newDate).getTime();
						if(".$data["ID_KOTA"]."==idKota){
							masuk.push([nd,".$data['J']."]);
						}
					";
				}
			}
			
			if($dist_keluar){
				foreach($dist_keluar->result_array() as $data){
					echo "
						var myDate = '".$data['TANGGAL_KEJADIAN']."';
						myDate = myDate.split('-');
						var newDate = myDate[1]+'/'+1+'/'+myDate[0];
						nd = new Date(newDate).getTime();
						if(".$data["ID_KOTA"]."==idKota){
							keluar.push([nd,".$data['J']."]);
						}
						
					";
				}
			}
			
		?>
		
		var plot = $.plot($("#chart-dist"),
				[ { data: masuk, label: "distribusi masuk"}, { data: keluar, label: "distribusi keluar" } ], {
				   series: {
					   lines: { show: true  },
					   points: { show: true }
				   },
				   grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
				   yaxis: { min: 0, max: <?php echo $max_dist["J"]; ?>+1 },
				   xaxis: {
							mode: "time", 
							timeformat: "%b/%y", 
							minTickSize: [1, "month"],
							monthNames: ["jan", "feb", "mar", "apr", "mar", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
						},
				   colors: ["#539F2E", "#3C67A5"]
				 });
			function showTooltip(x, y, contents) {
			$('<div id="tooltip">' + contents + '</div>').css( {
				position: 'absolute',
				display: 'none',
				top: y + 5,
				left: x + 5,
				border: '1px solid #fdd',
				padding: '2px',
				'background-color': '#dfeffc',
				opacity: 0.80
			}).appendTo("body").fadeIn(200);
		}
			var previousPoint = null;
		$("#chart-dist").bind("plothover", function (event, pos, item) {
			$("#x").text(pos.x.toFixed(2));
			$("#y").text(pos.y.toFixed(2));
					if (item) {
					if (previousPoint != item.dataIndex) {
						previousPoint = item.dataIndex;
							$("#tooltip").remove();
						var x = item.datapoint[0].toFixed(2),
							y = item.datapoint[1].toFixed(2),
							date = new Date(x/1000*1000),
							day = date.getDate(),
							month = date.getMonth()+1,
							year = date.getFullYear();
							//item.series.label
						showTooltip(item.pageX, item.pageY,
									"&nbsp;&nbsp;&nbsp;"+month+"/"+year+" = "+y);
					}
				}
				else {
					$("#tooltip").remove();
					previousPoint = null;
				}
		});
			$("#chart-dist").bind("plotclick", function (event, pos, item) {
			if (item) {
				$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
				plot.highlight(item.series, item.datapoint);
			}
		});
	}
}
/* End Chart Distribusi */

</script>